<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
        :data="data"
        width="500"
        node-key="_id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span style="padding-right: 30px">{{ data.name }}</span>
          <span>
            <el-button
              plain
              type="primary"
              size="mini"
              v-show="node.level == '2' ? false : true"
              @click="() => append(data)"
            >
              新增
            </el-button>
            <el-button
              plain
              type="danger"
              size="mini"
              @click="() => remove(data)"
            >
              删除
            </el-button>
            <el-button
              plain
              type="warning"
              size="mini"
              @click="insurance(data.id)"
            >
              产品
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div>
      <el-dialog
        title="新增"
        :visible.sync="dialogFormVisible"
        width="400px"
        :before-close="handleClose"
      >
        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
          <el-form-item
            label="分类名称"
            prop="name"
            style="margin-bottom: 20px"
          >
            <el-input type="text" v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="canle">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "productCategory",
  components: {
    //HelloWorld
  },
  data() {
    return {
      data: [],
      dialogFormVisible: false,
      form: {
        parentId: 0,
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "分类标题不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //获取分类数据
    getList() {
      this.$http({
        url: "/admin/index/Cat",
      }).then((res) => {
        this.data = JSON.parse(JSON.stringify(res));
        console.log(this.data);
      });
    },
    append(data) {
      this.dialogFormVisible = true;
      this.form.parentId = data.id;
    },
    //提交表单数据到后台
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/admin/index/Cat",
            method: "POST",
            data: this.form,
          }).then((res) => {
            if (!res.errorMsg) {
              this.dialogFormVisible = false;
              this.getList();
            }
          });
        }
      });
    },

    remove(data) {
      this.$confirm("此操作将永久删除该文件将不可恢复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$http({
            url: "/admin/index/Cat",
            method: "DELETE",
            params: { indexId: data._id },
          }).then((res) => {
            if (!res.errorMsg) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1000,
          });
        });
    },
    //直接调用$router.push 实现携带参数的跳转
    insurance(id) {
      this.$router.push({
        path: `productSku/${id}`,
      });
    },
    //关闭弹窗前的回调
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.getList();
          done();
        })
        .catch(() => {});
    },
    //取消弹窗刷新列表
    canle() {
      this.dialogFormVisible = false;
      this.getList(1);
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style >
.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 30px;
}
</style>
